
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库  v2.7.13-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<!--   3.6.5    不要用4.x  Vue.components("router-link") -->
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>

		<style>  
		
		</style>
	</head>
	<body>

		<div id="app">
		    <p>
		        <button @click="toHome">首页</button>
		        <button @click="toNews">新闻</button>
		        <button @click="toLogin">登陆</button>
		        <button @click="doForward1">前进</button>
		        <button @click="doForward2">前进</button>
		        <button @click="doBack1">后退</button>
		        <button @click="doBack2">后退</button>
		    </p>
			<!-- 站位 -->
		    <router-view></router-view>
		</div>
		
		
		<script type="text/javascript">
		    const Home = {
		        template: '<div>首页</div>'
		    }
		    const News = {
		        template: '<div>新闻：</div>'
		    }
		    const Login = {
		        template: '<div>登陆</div>'
		    }
		
		
		    const router = new VueRouter({
				// mode: 'hash',  //#
				mode: 'history', //使用的是浏览器的history API
				routes :[{
					path: '/',
					component: Home
				}, {
					path: '/home',
					component: Home
				}, {
					path: '/news',
					component: News
				}, {
					path: '/login',
					component: Login
				}]
		    });
			
			//切换路由的时候触发
			// router.beforeEach(function(to, from, next) => {
			// 	// ...
			// 	this
			// })
			
			//路由的守卫
			let login = false;
			router.beforeEach((to, from, next) => {
				// ...
				console.log("from",from)
				console.log("to",to);
				console.log("next",next);
				
				if(to.path != "/login"){
					if(login){
						next()
					}else{
						//如果没有登录则跳转到登录
						next({path:'/login'})
					}
				}else{
					//白名单
					next(); //接续跳转到  to的目标
				}
				
				
			})
							
			
			
			
			
		
		    var vm = new Vue({
		        el: '#app',
		        data: {},
		        router,
				watch:{
					$route(newRoute, oldRoute) {
						console.log('watch', newRoute, oldRoute);
						if(newRoute.path != '/login'){
							console.log("验证是否有登录状态");
						}
					}
				},
		        methods:{
		            toHome(){
		                //无参数时，push方法中直接写路由地址
		                this.$router.push('/home');
		            },
		            toNews(){
		                //有参数时，push方法中写一个json对象
		                this.$router.push({path:'/news',query:{name:'zhangsan'}});
		                // this.$router.push({path:'/news',query:{name:'zhangsan'}});
		            },
		            toLogin(){
		                // this.$router.push('/login');  //追加新的路径
		                this.$router.replace('/login'); //替换当前路径，不产生历史
		            },
		            doForward1(){
		                this.$router.forward();
		            },
		            doForward2(){
		                this.$router.go(1);
		            },
		            doBack1(){
		                this.$router.back();
		            },
		            doBack2(){
		                this.$router.go(-1);
		            }
		        }
		    })
		</script>

	</body>
</html>
